import { DomUtils } from "./utils/DomUtils";
import { createRouter } from "./utils/router";
import { routerStore } from "./stores/routerStore";

import { BaseLayout } from "./pages/Layout/base-layout/BaseLayout.js"; //BasicLayout 页面
import { HomePage } from "./pages/HomePage/HomePage.js"; //引入Home 页面
import { DashboardsPage } from "./pages/DashboardsPage/DashboardsPage.js"; //DashboardsPage 页面
import { WebElementsPage } from "./pages/WebElementsPage/WebElementsPage.js"; //WebElementsPage 页面
import { UserPage } from "./pages/UserPage/UserPage.js"; //UserPage 页面
import { RegisterPage } from "./pages/RegisterPage/RegisterPage.js"; //RegisterPage 页面
import { LoginPage } from "./pages/LoginPage/LoginPage.js"; //LoginPage页面
import { PasswordPage } from "./pages/PasswordPage/PasswordPage.js"; //PasswordPage页面
import { NotFoundPage } from "./pages/NotFoundPage/NotFoundPage.js"; //NotFoundPage 页面
import { MyAccountPage } from "./pages/MyAccountPage/MyAccountPage.js"; //MyAccountPage页面
import { MyOrderPage } from "./pages/MyOrderPage/MyOrderPage.js";
import { MarketPage } from "./pages/MarketPage/MarketPage.js";
import { AdminOrderPage } from "./pages/AdminOrderPage/AdminOrderPage.js";
import { AdminProductPage } from "./pages/AdminProductPage/AdminProductPage.js";
import { FarmerOrderPage } from "./pages/FarmerOrderPage/FarmerOrderPage.js";
import { FarmerProductPage } from "./pages/FarmerProductPage/FarmerProductPage.js";
import { KnowledgePage } from "./pages/KnowledgePage/KnowledgePage.js";
import { VideoPage } from "./pages/VideoPage/VideoPage.js";
import { CartPage } from "./pages/CartPage/CartPage.js";
import { CommunityPage } from "./pages/CommunityPage/CommunityPage.js";
import { ProductDetailsPage } from "./pages/ProductDetailsPage/ProductDetailsPage.js";
import { CheckOutPage } from "./pages/CheckOutPage/CheckOutPage.js";
import { PostDetailsPage } from "./pages/PostDetailsPage/PostDetailsPage.js";

// 渲染带有 BaseLayout 的页面
async function renderBasicPage(PageClass) {
  const contentDOM = await new BaseLayout().render(PageClass);
  const appRoot = document.getElementById("app");
  appRoot.innerHTML = "";
  appRoot.appendChild(contentDOM);
}

// 初始化路由
const router = createRouter({
  mode: "hash", // 'history' 或 'hash'
  routes: {
    "/": () => renderBasicPage(HomePage),
    "/home": () => renderBasicPage(HomePage),
    "/dashboards": () => renderBasicPage(DashboardsPage),
    "/web-elements": () => renderBasicPage(WebElementsPage),
    "/myaccount": () => renderBasicPage(MyAccountPage),
    "/market": () => renderBasicPage(MarketPage),
    "/product-detail": () => renderBasicPage(ProductDetailsPage),
    "/cart": () => renderBasicPage(CartPage),
    "/check-out": () => renderBasicPage(CheckOutPage),
    "/my-orders": () => renderBasicPage(MyOrderPage),
    "/knowledge": () => renderBasicPage(KnowledgePage),
    "/post-detail": () => renderBasicPage(PostDetailsPage),
    "/farmer-orders": () => renderBasicPage(FarmerOrderPage),
    "/farmer-products": () => renderBasicPage(FarmerProductPage),
    "/community": () => renderBasicPage(CommunityPage),
    "/admin-orders": () => renderBasicPage(AdminOrderPage),
    "/admin-products": () => renderBasicPage(AdminProductPage),
    "/video": () => renderBasicPage(VideoPage),

    "/register": () => renderPage(RegisterPage),
    "/login": () => renderPage(LoginPage),
    "/password": () => renderPage(PasswordPage),

    "/user": async (params) => {
      const page = new UserPage(params.id);
      const dom = await page.render();
      DomUtils.replaceElement(dom, ".content-container");
    },
    "*": () => renderPage(NotFoundPage),
  },
  routerStore: routerStore,
});

// 渲染不带 Layout 的独立页面
async function renderPage(PageClass) {
  const contentDOM = await new PageClass().render();
  const appRoot = document.getElementById("app");
  appRoot.innerHTML = "";
  appRoot.appendChild(contentDOM);
}

// 暴露到全局方便测试
window.router = router;
